<template>
    <div>
        <!-- 任务列表表格 -->
        <div v-if="tasks.length > 0" class="task-table">
            <el-table :data="tasks" style="width: 100%">
                <el-table-column width="50">
                    <template #default="{ row }">
                        <el-button @click="toggleExpand(row)" circle>
                            <el-icon v-if="taskExpandState[row.id]">
                                <ArrowDown />
                            </el-icon>
                            <el-icon v-else>
                                <ArrowRight />
                            </el-icon>
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="任务名称" width="180">
                    <template #default="{ row }">
                        <el-icon>
                            <Folder />
                        </el-icon>
                        {{ row.name }}
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="描述" width="180">
                </el-table-column>
                <el-table-column prop="priority" label="优先级" width="80">
                    <template #default="{ row }">
                        <el-tag :type="getPriorityColor(row.priority)" effect="dark">
                            {{ getPriorityLabel(row.priority) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="start_time" label="开始时间" width="180">
                </el-table-column>
                <el-table-column prop="end_time" label="结束时间" width="180">
                </el-table-column>
                <el-table-column prop="workload" label="工作量" width="80">
                </el-table-column>
                <!-- 进度列 -->
                <el-table-column label="进度" width="200">
                    <template #default="{ row }">
                        <el-progress :percentage="row.taskScheduleVO.progress"
                            :color="progressColor(row.taskScheduleVO.progress)"></el-progress>
                    </template>
                </el-table-column>
                <el-table-column prop="grade" label="计划价值" width="80">
                </el-table-column>
                <el-table-column prop="performanceVO.valueSum" label="实际价值" width="80">
                </el-table-column>
                <el-table-column prop="appraiser_id" label="负责人" width="80">
                    <template #default="{ row }">
                        <span>{{ getEmployeeName(row.appraiser_id) || '未分配' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="members_names" label="参与人" width="200">
                    <template #default="{ row }">
                        <div>
                            <el-tag v-for="(member, index) in row.members" :key="index" style="margin: 2px;">
                                {{ member.name }}
                            </el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="220">
                    <template #default="{ row }">
                        <el-button type="primary" plain @click="viewDetails(row)">查看</el-button>
                        <!-- <el-button type="primary" plain @click="openDialog(row)">添加</el-button> -->
                        <el-button type="primary" plain @click="openEvaluateDialog(row)">评价</el-button>
                        <!-- <el-button type="success" plain @click="openReportDialog(row)">填报</el-button> -->
                    </template>
                </el-table-column>
            </el-table>

            <!-- 子任务列表 -->
            <div v-for="task in tasks" :key="task.id">
                <transition name="slide">
                    <el-table v-show="taskExpandState[task.id]" :data="subtasks[task.id]" class="subtask-table"
                        style="margin-left: 20px; width: calc(100% - 20px)">
                        <el-table-column prop="name" label="子任务名称" width="180">
                            <template #default="{ row }">
                                <el-icon>
                                    <Document />
                                </el-icon>
                                {{ row.name }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="description" label="描述" width="180">
                        </el-table-column>
                        <el-table-column prop="priority" label="优先级" width="80">
                            <template #default="{ row }">
                                <el-tag :type="getPriorityColor(row.priority)" effect="dark">
                                    {{ getPriorityLabel(row.priority) }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="start_time" label="开始时间" width="180">
                        </el-table-column>
                        <el-table-column prop="end_time" label="结束时间" width="180">
                        </el-table-column>
                        <el-table-column prop="grade" label="计划价值" width="80">
                        </el-table-column>
                        <el-table-column prop="performanceVO.valueSum" label="实际价值" width="80">
                        </el-table-column>
                        <el-table-column prop="appraiser_id" label="负责人" width="80">
                            <template #default="{ row }">
                                <span>{{ getEmployeeName(row.appraiser_id) || '未分配' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="members_names" label="参与人" width="200">
                            <template #default="{ row }">
                                <div>
                                    <el-tag v-for="(member, index) in row.members" :key="index" style="margin: 2px;">
                                        {{ member.name }}
                                    </el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="220">
                            <template #default="{ row }">
                                <el-button type="primary" plain @click="viewDetails(row)">查看</el-button>
                                <el-button type="primary" plain @click="openEvaluateDialog(row)">评价</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </transition>
            </div>
        </div>
        <p v-else>暂无任务记录。</p>

        <!-- 创建任务的按钮 -->
        <!-- <el-button @click="openDialog()" class="create-task-button">创建任务</el-button> -->

        <!-- 创建任务的弹窗 -->
        <el-dialog v-model="dialogVisible" title="创建任务" width="50%">
            <el-form :model="taskForm" :rules="createTaskRules" label-width="120px">
                <el-form-item label="任务名称" prop="name">
                    <el-input v-model="taskForm.name"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="taskForm.description"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" prop="start_time">
                    <el-date-picker type="datetime" placeholder="选择日期时间" v-model="taskForm.start_time"
                        style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="end_time">
                    <el-date-picker type="datetime" placeholder="选择日期时间" v-model="taskForm.end_time"
                        style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="创建人" prop="creator_id">
                    <el-input v-model="taskForm.creator_name" disabled placeholder="此字段不可编辑"></el-input>
                </el-form-item>
                <!-- 负责人选择部分 -->
                <el-form-item label="负责人" prop="appraiser_id">
                    <el-select v-model="taskForm.appraiser_id" placeholder="请选择负责人" style="width: 100%;"
                        @focus="fetchEmployees">
                        <el-option v-for="employee in employees" :key="employee.id" :label="employee.name"
                            :value="employee.id">
                            <span>{{ employee.name }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="权重" prop="grade">
                    <el-input v-model="taskForm.grade"></el-input>
                </el-form-item>
                <el-form-item label="优先级" prop="priority">
                    <el-select v-model="taskForm.priority" placeholder="请选择优先级" style="width: 100%;">
                        <el-option label="重要且紧急" value="1"></el-option>
                        <el-option label="重要但不紧急" value="2"></el-option>
                        <el-option label="紧急但不重要" value="3"></el-option>
                        <el-option label="不重要且不紧急" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工作量" prop="workload">
                    <el-input v-model="taskForm.workload"></el-input>
                </el-form-item>
                <el-form-item label="成员" prop="members">
                    <div>
                        <el-tag v-for="member in taskForm.members" :key="member">{{ member }}</el-tag>
                        <el-select v-model="taskForm.members" multiple placeholder="请选择成员" style="margin-left: 10px;"
                            @focus="fetchEmployees">
                            <el-option v-for="employee in employees" :key="employee.id" :label="employee.name"
                                :value="employee.id">
                                <span>{{ employee.name }}</span>
                            </el-option>
                        </el-select>
                        <!-- <el-button @click="addMember" type="success" :icon = "Check" circle></el-button> -->
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 评价任务的弹窗 -->
        <el-dialog v-model="EvaluateDialogVisible" title="评价任务" width="50%">
            <el-form :model="evaluateTaskForm" :rules="evaluateTaskRules" label-width="120px">
                <el-form-item label="评价" prop="evaluation">
                    <el-input v-model="evaluateTaskForm.evaluation"></el-input>
                </el-form-item>
                <el-form-item label="评价人" prop="appraiser_name">
                    <el-input v-model="evaluateTaskForm.appraiser_name" disabled placeholder="此字段不可编辑"></el-input>
                </el-form-item>
                <el-form-item label="评分" prop="score">
                    <el-input v-model="evaluateTaskForm.score"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitEvaluateForm">提交</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 查看任务详情的弹窗 -->
        <el-dialog v-model="detailsDialogVisible" title="任务详情" width="60%">
            <pre class="details-pre">{{ details }}</pre>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="detailsDialogVisible = false">关闭</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 填报弹窗 -->
        <el-dialog v-model="reportDialogVisible" title="任务填报" width="50%">
            <el-form :model="reportForm" :rules="reportRules" ref="reportFormRef" label-width="120px">
                <el-form-item label="任务状态" prop="status">
                    <el-radio-group v-model="reportForm.status">
                        <el-radio :label="0">未完成</el-radio>
                        <el-radio :label="1">已完成</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="完成情况" prop="content">
                    <el-input type="textarea" v-model="reportForm.content" placeholder="请填写任务完成情况"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="closeReportDialog">取消</el-button>
                    <el-button type="primary" @click="submitReport">提交</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import axios from '../../api/axios.js'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)
const EvaluateDialogVisible = ref(false)
const tasks = ref([]) // 存储所有任务的数组
const detailsDialogVisible = ref(false);
const details = ref('');
const params = defineProps(['projectId', 'projectName'])
const subtasks = ref({});
const employees = ref([]);
const taskExpandState = ref({});
const reportFormRef = ref(null); // 表单引用
import { useCookies } from "vue3-cookies"

const { cookies } = useCookies();
const taskForm = reactive({
    name: '',
    description: '',
    start_time: null,
    end_time: null,
    creator_id: '',
    creator_name: '', // 新增属性来显示创建人的名字
    appraiser_id: '',
    grade: '',
    priority: '',
    workload: '',
    parent_id: 0,
    project_id: params.projectId,
    members: [],
});

const evaluateTaskForm = reactive({
    task_id: '',
    appraiser_name: cookies.get("name"),
    description: '',
    grade: '',

});

// 定义数据模型
const reportDialogVisible = ref(false);
const reportForm = reactive({
    status: 0,
    content: '',
    task_id: '',
    sender_id: cookies.get("id"),
    senderName: ''
});

//任务填报规则
const reportRules = {
    status: [{ required: true, message: '请选择任务状态', trigger: 'change' }],
    content: [{ required: true, message: '请填写任务完成情况', trigger: 'blur' }]
};

//创建任务规则
const createTaskRules = {
    name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
    description: [{ required: false, message: '请输入任务描述', trigger: 'blur' }],
    start_time: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
    end_time: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
    creator_id: [{ required: true, message: '请选择创建人', trigger: 'blur' }],
    appraiser_id: [{ required: true, message: '请选择负责人', trigger: 'blur' }],
    grade: [{ required: true, message: '请填写权值', trigger: 'blur' }],
    priority: [{ required: true, message: '请选择优先级', trigger: 'blur' }],
    workload: [{ required: true, message: '请填写工作量', trigger: 'blur' }],
    members: [{ required: true, message: '请选择成员', trigger: 'blur' }]
}

//评价任务规则
const evaluateTaskRules = {
    description: [{ required: false, message: '请输入评价', trigger: 'blur' }],
    score: [{ required: true, message: '请填写评分', trigger: 'blur' }],
}

// 获取员工列表
const fetchEmployees = async () => {
    await axios.get('/employee/getEmployeeList')
        .then(response => {
            employees.value = response.data.data || [];
        })
        .catch(error => {
            console.error('Failed to fetch employees:', error);
            ElMessage.error('获取员工列表失败');
        });
};

const getEmployeeName = (id) => {
    const employee = employees.value.find(emp => emp.id === id);
    return employee ? employee.name : null;
};

// 格式化时间为 "YYYY-MM-DD HH:mm"
function formatDateTime(dateTimeString) {
    // 解析时间字符串
    const date = new Date(dateTimeString.replace(' ', 'T') + 'Z');

    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');

    return `${year}-${month}-${day} ${hours}:${minutes}`;
}

//任务详情弹窗
function openDialog(row) {
    dialogVisible.value = true;

    // 获取当前登录用户的 ID 和名字
    const currentUserID = cookies.get("id");
    const currentUserName = cookies.get("name");

    if (currentUserID && currentUserName) {
        taskForm.creator_id = currentUserID;
        taskForm.creator_name = currentUserName;
    }

    if (typeof (row) != 'undefined') {
        taskForm.parent_id = row.id;
    }
}

//评价任务弹窗
function openEvaluateDialog(row) {
    EvaluateDialogVisible.value = true;

    if (typeof (row) != 'undefined') {
        evaluateTaskForm.id = row.id;
    }
}

// 打开填报弹窗
const openReportDialog = (row) => {
    reportForm.task_id = row.id;
    reportForm.status = row.status; // 如果已有状态，预填充
    reportForm.content = ''; // 清空内容
    reportDialogVisible.value = true;

    // 获取当前登录用户的 ID 和名字
    const currentUserID = cookies.get("id");
    const currentUserName = cookies.get("name");

    if (currentUserID && currentUserName) {
        reportForm.sender_id = parseInt(currentUserID, 10);
        reportForm.senderName = currentUserName;
    }
};

// 提交填报表单
const submitReport = async () => {
    try {
        await reportFormRef.value.validate(async (valid) => {
            if (!valid) return;

            // 更新任务状态
            await axios.put(`/task/done/${reportForm.task_id}`, {
                status: reportForm.status
            });

            // 插入任务完成情况记录
            await axios.post('/task/chat', {
                content: reportForm.content,
                receiver: '', // 根据实际需求设置接收者
                senderId: reportForm.sender_id,
                taskId: reportForm.task_id
            });

            ElMessage.success('任务填报成功');
            reportDialogVisible.value = false;
            // 重新加载任务列表
            await fetchTasks();
        });
    } catch (error) {
        console.error('任务填报失败:', error.response.data);
        ElMessage.error('任务填报失败，请检查输入信息和权限');
    }
};

// 关闭填报弹窗
const closeReportDialog = () => {
    reportDialogVisible.value = false;
    if (reportFormRef.value) {
        reportFormRef.value.resetFields();
    }
};

//刷新
onMounted(async () => {
    await fetchtasks();
    await fetchEmployees(); // 确保在组件挂载时加载员工列表
})

//任务详情
const viewDetails = (row) => {
    // row 可能是父任务或子任务
    let formattedDetails = '';

    // 格式化任务基本信息
    formattedDetails += `任务名称: ${row.name}\n`;
    formattedDetails += `描述: ${row.fulltask.task.description || '无描述'}\n`;
    formattedDetails += `创建时间: ${row.fulltask.task.create_time || '无创建时间'}\n`;
    formattedDetails += `开始时间: ${row.start_time || '无开始时间'}\n`;
    formattedDetails += `结束时间: ${row.end_time || '无结束时间'}\n`;
    formattedDetails += `已分配权值: ${row.fulltask.task.assign || '无权值'}\n`;

    // 格式化创建者信息
    formattedDetails += `创建人:`;
    formattedDetails += `${row.creator.name || '无创建人'}\n`;

    // 格式化成员信息
    formattedDetails += `成员:`;
    if (row.members && row.members.length > 0) {
        row.members.forEach((member, index) => {
            // formattedDetails += `成员${index + 1}:`;
            formattedDetails += `${member.name}`;
            if (index !== row.members.length - 1) {
                formattedDetails += `；`;
            }
        });
    } else {
        formattedDetails += `无成员\n`;
    }

    // 更新详情变量
    details.value = formattedDetails;

    // 显示对话框
    detailsDialogVisible.value = true;
};

//创建任务提交
async function submitForm() {
    try {
        // 转换时间格式
        const convertDate = (date) => {
            if (date) {
                const d = new Date(date);
                return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
            }
            return null;
        };
        const members = taskForm.members;

        const taskDTO = {
            task: {
                name: taskForm.name,
                description: taskForm.description,
                start_time: convertDate(taskForm.start_time),
                end_time: convertDate(taskForm.end_time),
                creator_id: taskForm.creator_id,
                appraiser_id: taskForm.appraiser_id,
                grade: taskForm.grade,
                priority: taskForm.priority,
                workload: taskForm.workload,
                parent_id: taskForm.parent_id,
                project_id: taskForm.project_id
            },
            members: members
        }

        const taskResponse = await axios.post('/task/create', taskDTO)
        ElMessage.success(taskResponse.data.message)
        dialogVisible.value = false // 关闭弹窗

        // 重新加载任务列表
        await fetchtasks()
        // 清空表单
        resetForm();
    } catch (error) {
        console.error('创建任务失败:', error.response.data);
        ElMessage.error('创建任务失败，请检查输入信息和权限');
    }
}

//评价任务提交
async function submitEvaluateForm() {

    try {
        const evaluationDTO = {
            id: evaluateTaskForm.id,
            evaluation: evaluateTaskForm.evaluation,
            score: evaluateTaskForm.score
        }

        const response = await axios.post('/task/evaluate', evaluationDTO)

        ElMessage.success(response.data.message)
        dialogVisible.value = false // 关闭弹窗

        // 重新加载任务列表
        await fetchtasks()
        // 清空表单
        resetForm();
    } catch (error) {
        console.error('评价任务失败:', error.response.data);
        ElMessage.error('评价任务失败，请检查输入信息和权限');
    }
}

//查看参与任务
async function fetchtasks() {
    try {
        const res = await axios.get('project/completedTask', {
            params: {
                eid: cookies.get("id"),// 使用当前用户的ID
                parent: 0, // 获取根任务
            }
        })
        console.log(res);
        // 从响应数据中提取任务列表
        const taskList = res.data.data && res.data.data.list ? res.data.data.list : [];
        // 处理任务列表，并存储在 tasks.value 中
        tasks.value = taskList.map(task => ({
            id: task.task.id, // 确保有 id 属性
            name: task.task.name,
            start_time: formatDateTime(task.task.start_time),// 使用格式化后的时间
            end_time: formatDateTime(task.task.end_time),// 使用格式化后的时间
            workload: task.task.workload,
            status: task.task.status, // 添加任务状态
            fulltask: task,
            creator: task.creator,
            members: task.members,
            taskScheduleVO: task.taskScheduleVO,
            priority: task.task.priority,
            description: task.task.description,
            appraiser_id: task.task.appraiser_id,
            grade: task.task.grade,
            performanceVO: task.performanceVO
        }));
    } catch (err) {
        console.error(err);
    }
}

// 根据进度百分比返回不同的颜色
const progressColor = (progress) => {
    if (progress >= 100) return '#67C23A'; // 完成
    else if (progress >= 50) return '#E6A23C'; // 进行中
    else return '#F56C6C'; // 未开始或延迟
};

// 获取优先级的颜色
const getPriorityColor = (priority) => {
    if (priority === '1') return 'danger'; // 高优先级为红色
    if (priority === '2') return 'warning'; // 中优先级为黄色
    if (priority === '3') return 'info'; // 低优先级为蓝色
    return 'info'; // 默认返回蓝色
};

// 根据优先级返回对应的标签文本
const getPriorityLabel = (priority) => {
    if (priority === '1') return '高'; // 高优先级
    else if (priority === '2') return '中'; // 中优先级
    else if (priority === '3') return '低'; // 低优先级
    return '';
};

const toggleExpand = async (row) => {
    const shouldExpand = !taskExpandState.value[row.id];
    // 先更新展开状态
    taskExpandState.value = {
        ...taskExpandState.value,
        [row.id]: shouldExpand
    };

    // 如果展开且没有缓存数据，则加载子任务
    if (shouldExpand && !subtasks.value[row.id]) {
        await fetchsubtasks(row.id);
    }
};

//查看参与的子任务
async function fetchsubtasks(parent_id) {
    try {
        const res = await axios.get('project/completedTask', {
            params: {
                eid: cookies.get("id"), // 使用当前用户的ID
                parent: parent_id, // 获取根任务
            }
        })
        console.log(res);
        // 从响应数据中提取任务列表
        const taskList = res.data.data && res.data.data.list ? res.data.data.list : [];
        // 处理任务列表，并存储在 subtasks 对象中，使用 parent_id 作为 key
        subtasks.value[parent_id] = taskList.map(task => ({
            id: task.task.id, // 确保有 id 属性
            name: task.task.name,
            start_time: formatDateTime(task.task.start_time),// 使用格式化后的时间
            end_time: formatDateTime(task.task.end_time),// 使用格式化后的时间
            workload: task.task.workload,
            fulltask: task,
            creator: task.creator,
            members: task.members,
            taskScheduleVO: task.taskScheduleVO,
            priority: task.task.priority,
            description: task.task.description,
            appraiser_id: task.task.appraiser_id,
            grade: task.task.grade,
            performanceVO: task.performanceVO
        }));
    } catch (err) {
        console.error(err);
    }
}

//重置输入
function resetForm() {
    if (taskFormRef.value) {
        taskFormRef.value.resetFields();
    }
    // 清空成员数组
    taskForm.members = [];
}
</script>


<style scoped>
.el-container {
    height: 100%;
    box-shadow: 0 0 4px rgb(92, 91, 91);
}

.el-dialog__header {
    background-color: #f9fafb;
}

.el-dialog__body {
    padding: 20px;
}

.el-dialog__footer {
    padding: 20px;
    text-align: right;
}

.el-dialog__title {
    color: #4a5568;
}

form.el-form.el-form--default.el-form--label-right.demo-ruleForm {
    margin-top: 8px;
    margin-right: 10px;
}

button.el-button.el-button--primary,
button.el-button {
    width: 10%;
    border-radius: 10px;
}


/* 过渡动画 */
.slide-enter-active,
.slide-leave-active {
    transition: all 0.3s ease;
    max-height: 1000px;
    /* 根据实际内容高度调整 */
    overflow: hidden;
}

.slide-enter-from,
.slide-leave-to {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
}

/* 子任务表格样式 */
.subtask-table {
    transition: all 0.3s;
    background: #f8f9fa;
    border-left: 3px solid #409eff;
    margin-top: -1px;
}

/* 调整箭头按钮样式 */
.el-button.is-circle {
    padding: 6px;
    transition: transform 0.3s;
}

.el-button.is-circle[aria-expanded="true"] {
    transform: rotate(90deg);
}


/* 添加创建项目的按钮样式 */
.create-task-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

/* 查看任务详情的弹窗样式 */
.details-pre {
    white-space: pre-wrap;
    word-break: break-all;
    font-family: "Arial", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #4a5568;
    background-color: #f9fafb;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.task-card {
    margin-bottom: 20px;
}

.task-table {
    margin-bottom: 20px;
}

.el-table {
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.el-table th,
.el-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

.el-table .cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.create-task-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}
</style>